<template>
  <div id="incityCancelRule">
    <div class="top_bar">
      <top-bar :title="title" v-show="IsTopbar">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="blacklist_box">
      <ul>
        <li v-for="(item, index) in blackData" :key="index">
          <em>
            <img :src="item.userPhoto" />
          </em>
          <span>尾号{{item.userPhone}}</span>
          <b @click="delBlack(item)">
            <img src="@/assets/imgs/pc_icon_sc.png" />
          </b>
        </li>
        <!-- <li>
          <em>
            <img src="@/assets/imgs/snyc_tx.png" />
          </em>
          <span>尾号6584</span>
          <b>
            <img src="@/assets/imgs/pc_icon_sc.png" />
          </b>
        </li>-->
      </ul>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/tishi.svg';
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import { Icon, Dialog } from 'mand-mobile';
import Loading from '@/components/loading';
import http from '@/common/http';
export default {
  components: {
    [TopBar.name]: TopBar,
    [Icon.name]: Icon
  },
  data() {
    return {
      title: '黑名单',
      IsTopbar: true,
      blackData: []
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
    // 获取黑名单列表
    Loading.show();
    http.post('/pakj/hitchUser/getBlackUser', {}).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        console.log(res.data);
        this.blackData = res.data.data;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    // 删除黑名单
    delBlack(item) {
      Dialog.confirm({
        icon: 'tishi',
        content: '从黑名单移除？',
        confirmText: '确定',
        onConfirm: () => {
          this.confirmDelBlack(item);
        }
      });
    },
    confirmDelBlack(item) {
      let params = {
        userId: item.userId,
        blackId: item.blackId
      };
      Loading.show();
      http.post('/pakj/hitchUser/delBlackUer', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
#incityCancelRule {
  height: 100vh;
  background-color: color-primary-background;

  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  h6, h5 {
    display: block;
    font-size: 22px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
  }

  .blacklist_box ul li {
    height: 120px;
    background-color: #fff;
    line-height: 120px;
    margin-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .blacklist_box ul li em img {
    width: 60px;
    height: 60px;
    position: relative;
    top: 20px;
  }

  .blacklist_box ul li span {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .blacklist_box ul li b img {
    width: 28px;
    height: 30px;
    position: relative;
    top: 45px;
    float: right;
  }
}
</style>
